<template>
<div>
  <h1>学习vue</h1>
  <div class="block">
  <span class="demonstration"></span>
  <el-rate
    v-model="value2"
    :colors="colors">
  </el-rate>
</div>
<div>
     <el-table
      :data="tableData"
      style="width: 100%">
       <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
    </el-table>
 <div style="margin-top: 20px">
    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
    <el-button @click="setCurrent()">取消选择</el-button>
  </div>
  </div>
  <div class="block">
  <span class="demonstration"></span>
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div>

</div>
</template>

<script>

   export default {
      data() {
        return {
          tableData: [{
            date: '2022-33-22',
            name: '田宏迪',
            address: '重庆邮电大学高科讲课',
            tag: '家'
          }, {
            date: '2022-33-22',
            name: '田宏迪',
            address: '重庆邮电大学高科讲课',
            tag:'公司'
          }, {
             date: '2022-33-22',
            name: '田宏迪',
            address: '重庆邮电大学高科讲课',
            tag:'公司'
          }, {
             date: '2022-33-22',
            name: '田宏迪',
            address: '重庆邮电大学高科讲课',
            tag:'公司'
          }, {
            
             date: '2022-33-22',
            name: '田宏迪',
            address: '重庆邮电大学高科讲课',
              tag: '家'
          }, {
             date: '2022-33-22',
            name: '田宏迪',
            address: '重庆邮电大学高科讲课',
              tag: '家'
          }, {
             date: '2022-33-22',
            name: '田宏迪',
            address: '重庆邮电大学高科讲课',
              tag: '家'
          }, {
             date: '2022-33-22',
            name: '田宏迪',
            address: '重庆邮电大学高科讲课',
              tag: '公司'
          }, {
          date: '2022-33-22',
            name: '田宏迪',
            address: '重庆邮电大学高科讲课',
              tag: '家'
          }],
          currentRow: null
          
        }
      },
       methods: {
        resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
  
      
      
      handleCurrentChange(val) {
        this.currentRow = val;
      }
   }
    }
  
</script>

<style scoped>
</style>